<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page import="java.io.*,java.util.*" %>
<%@ include file="/WEB-INF/pages/leftNavigation.jsp" %>
<%-- <%@ include file="/WEB-INF/pages/topnavigation.jsp" %> --%>

<!-- variable session -->
<%
   // Check if this is new comer on your web page.
   if (session.isNew()){
	  String myProductFavourites = new String();
	  String myFavourites = new String("myFavourites");
      session.setAttribute(myFavourites,  myProductFavourites);
   }
%>
<!-- /variable session -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Real_Estate_4_Rent</title>
<script type="text/javascript" src="<c:url value="/resources/js/jquery.min.js"/>">
</script>

<link href="<c:url value="/resources/style/style_test.css"/>" rel="stylesheet" type="text/css" />
<!-- carousel bootstrap -->
<link href="<c:url value="/resources/bootstrap/bootstrap.min.css"/>" rel="stylesheet" type="text/css" />
<link href="<c:url value="/resources/bootstrap/carousel.css"/>" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<c:url value="/resources/js/jquery-1.11.0.js"/>"></script>
<script type="text/javascript" src="<c:url value="/resources/bootstrap/bootstrap.min.js"/>"></script>
<!-- /carousel bootstrap --> 
<script>
	$(document).ready(function(){
		/* initial variable */
		myMapJavaScriptFavourites = "<%= session.getAttribute( "myFavourites" ) %>" ;
	});
	
	function addToFavorite(id, name){
		var myFavourites = new Array();
		var listObject = myMapJavaScriptFavourites.split(";");
		
		if(listObject.length > 0){
			for(var i = 0; i < listObject.length; i++){
				if(listObject[i].length > 0){
					var listValues = listObject[i].split("=");
					if(listValues.length > 0){
						var product = {
								id: listValues[0],
								name: listValues[1]
						}
						myFavourites.push(product);
					}
				}
			}
		}
		
		if(myFavourites.length < 3){
			if(checkDuplicate(myFavourites, id)){
				alert('This product has been selected, please try another one');
				return;
			}
			var product = {
					id: id,
					name: name
			}
			
			myFavourites.push(product);
			if(myFavourites.length < 2){
				$('.compare_button_action').prop("disabled",true);
			}
			if(myFavourites.length > 1){
				$('.compare_button_action').prop( "disabled", false );
			}
			$("#product_compare_area").show();
			// create div node and render on client
			var para = document.createElement("div");
			var attClass = document.createAttribute("class");
			attClass.value = "product_compare_" + id;
			var att= document.createAttribute("id");
			att.value="compare_button";
			para.setAttributeNode(att);
			para.setAttributeNode(attClass);
			// create div img
			var node = document.createElement("img");
			var attSrc = document.createAttribute("src");
			attSrc.value = name;
			var attId = document.createAttribute("id");
			attId.value = "image_in_compare_area";
			node.setAttributeNode(attSrc);
			node.setAttributeNode(attId);
			// create div a icon remove
			var nodeA = document.createElement("a");
			var nodeAonClick = document.createAttribute("onclick");
			nodeAonClick.value="RemoveFromCompare('product_compare_"+id +"')";
			nodeA.setAttributeNode(nodeAonClick);
			// append child image and icon remove
			para.appendChild(node);
			para.appendChild(nodeA);
			
			var element = document.getElementById("product_compare_queue");
			element.appendChild(para);
			// end render to client
			// add value and set to session
			value = id + "=" + name;
			// send data to client
			$.ajax({
	   			url: "${pageContext.request.contextPath}/asyncSessionVariable",
	   			type:"GET",
	   		    processData: false,
	   		    data: value,
	   		    contentType: false,
	   			success: function (response) {
	   				myMapJavaScriptFavourites = response;
	    		},
	   			error: function(jqXHR, textStatus, errorThrown){
	   				alert(textStatus);
	   			}
	   		});
		}else{
			alert('Can not compare 3 products at a time');
			$("#product_compare_area").show();
			return;
		}
	}
	
	function checkDuplicate(myFavourites, id){
		for(var i = 0; i< myFavourites.length; i++){
			if(myFavourites[i].id == id){
				return true;
			}
		}
		return false;
	}
	function readDataFromSession(){
		var myFavourites = new Array();
		var listObject = myMapJavaScriptFavourites.split(";");
		
		if(listObject.length > 0){
			for(var i = 0; i < listObject.length; i++){
				if(listObject[i].length > 0){
					var listValues = listObject[i].split("=");
					if(listValues.length > 0){
						var product = {
								id: listValues[0],
								name: listValues[1]
						}
						myFavourites.push(product);
					}
				}
			}
		}
		return myFavourites;
	};
	
	function loadData(){
		var myFavourites = readDataFromSession();
		
		// add node
		if(myFavourites.length){
			$("#product_compare_area").show();
		}
		for(var a = 0; a < myFavourites.length; a++){
			var valueIndex = myFavourites[a];
			
			var id = valueIndex.id;
			var name = valueIndex.name;
			
			var para = document.createElement("div");
			var attClass = document.createAttribute("class");
			attClass.value = "product_compare_" + id;
			var att= document.createAttribute("id");
			att.value="compare_button";
			para.setAttributeNode(att);
			para.setAttributeNode(attClass);
			// create div img
			var node = document.createElement("img");
			var attSrc = document.createAttribute("src");
			attSrc.value = name;
			var attId = document.createAttribute("id");
			attId.value = "image_in_compare_area";
			node.setAttributeNode(attSrc);
			node.setAttributeNode(attId);
			// create div a icon remove
			var nodeA = document.createElement("a");
			var nodeAonClick = document.createAttribute("onclick");
			nodeAonClick.value="RemoveFromCompare('product_compare_"+id +"')";
			nodeA.setAttributeNode(nodeAonClick);
			// append child image and icon remove
			para.appendChild(node);
			para.appendChild(nodeA);
			
			var element = document.getElementById("product_compare_queue");
			element.appendChild(para);
		}
	}
	
	function hideCompareArea(){
		$("#product_compare_area").hide();	  
	 }
	 function compareProducts(){
		 var myFavourites = readDataFromSession();
		 var parameter = "?";
		 for(var i = 0; i< myFavourites.length; i++){
			 if(i != myFavourites.length -1){
				 parameter = parameter + "id" + i + "=" + myFavourites[i].id + "&";
			 }else{	                               
				 parameter = parameter + "id" + i + "=" + myFavourites[i].id;
			 }
		 }
		 window.location.href = url = "${pageContext.request.contextPath}/compareProducts" + parameter;
	 }
	 
	 function checkToClose(myMapJavaScriptFavourites){
		 if(myMapJavaScriptFavourites == ""){
			 hideCompareArea();
		 }
	 }
	 
	 function RemoveFromCompare(id){
			var getId = id.split("_");
			var productId;
			if(getId != null && getId.length == 3){
				productId = getId[2];
			}
			
			var myFavourites = readDataFromSession();
			for(var i = 0; i< myFavourites.length; i++){
				if(myFavourites[i].id == productId){
					myFavourites.splice(i, 1);
					if(myFavourites.length < 2){
						$('.compare_button_action').prop("disabled",true);
					}
					if(myFavourites.length > 1){
						$('.compare_button_action').prop( "disabled", false );
					}
					break;
				}
			}
			var idTag = $("."+id);
			var idDelete = "id=" + productId;
			if(idTag != null){
				idTag.remove();
				// remove from session value
				// send data to client
				$.ajax({
		   			url: "${pageContext.request.contextPath}/asyncSessionVariableDel",
		   			type:"GET",
		   		    processData: false,
		   		    data: idDelete,
		   		    contentType: false,
		   			success: function (response) {
		   				myMapJavaScriptFavourites = response;
		   				checkToClose(myMapJavaScriptFavourites);
		    		},
		   			error: function(jqXHR, textStatus, errorThrown){
		   				alert(textStatus);
		   			}
		   		});
			}
		}
</script>
</head>

<body onload="loadData()">

<!--the left menu amazon-->
<!-- end the left menu-->
<!-- top navigation -->
<%@ include file="/WEB-INF/pages/topnavigation.jsp" %>
<!-- / top navigation -->
<div id="main_container">
  <div id="background_main">
    <div id="main">
      <!-- search form -->
      <%@ include file="/WEB-INF/pages/searchform.jsp" %>
      <!-- /search form -->
      <div id="hot_property">
        <div id="wrapper">
          	<div id="container">
          		<c:if test="${not empty listNewProperty}">
          			<!-- carousel -->
            		<div id="myCarousel" class="carousel slide" data-ride="carousel">
            			<!-- Indicators -->
					  	<ol class="carousel-indicators">
				  			<c:forEach items="${listNewProperty }" varStatus="countIndicator">
								<li data-target="#myCarousel" data-slide-to="${countIndicator.count -1}" class=""></li>	    
							</c:forEach>
					  	</ol>
					  	<div class="carousel-inner">
					  			<c:forEach var="property" items="${listNewProperty }" varStatus="counter">
					  				<c:choose>
					  					<c:when test="${counter.count == 1}">
									    	<div class="item active">
									    	  <a href="productDetail/${property.id}">
											  	<img alt="${property.productName}" src="${pageContext.request.contextPath}/images${property.picture }">
											  </a>
											  <div class="container">
												<div class="carousel-caption">
												  <h4>${property.productName}</h4>
												</div>
											  </div>
											</div>
										</c:when>
										<c:otherwise>
											<div class="item">
												<a href="productDetail/${property.id}">
											  		<img alt="${property.productName}" src="${pageContext.request.contextPath}/images${property.picture }">
											  	</a>
											  	<div class="container">
													<div class="carousel-caption">
													  	<h4>${property.productName}</h4>
													</div>
											  	</div>
											</div>
										</c:otherwise>
								    </c:choose>
								</c:forEach>
						  </div>
						  <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
		  				  <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
            		</div>
					<!-- /carousel -->
				</c:if>
        	</div>
     	</div>
      </div>
  </div>
  <div id="product_compare_area">
	<div id="product_compare_queue">
	</div>
	<div id="compare_button" style="border: none;margin-top: 45px;margin-left: 10px;">
		<input type="button" value="Compare" class="compare_button_action" onclick="compareProducts()"/>
	</div>
	<div id="compare_button" style="border: none;margin-top: 45px;margin-left: 10px;">
		<input type="button" class="close_button_action" value="Close" onclick="hideCompareArea()"/>
	</div>
	<div id="compare_button" class="alert_information" style="border: none;margin-top: 45px;margin-left: 10px;background-color: #f8f8f8;">Please select from 2 to 3 products to compare one</div>
  </div>
  <!-- New Property area -->
  <c:if test="${not empty listNewProperty}">
  <div id="product_area" class="new_properties_area">
  	<div id="name_property">
		<a href="resultProperty?categoryCode=ALL&pageSize=6&page=1">New property</a>
	</div>
  			<c:set var="numberNewProperty" value="0"> </c:set>
  			<c:forEach var="apartment" items="${listNewProperty }">
  				<% 
  					String numberNewPropertyValue = (String)pageContext.getAttribute("numberNewProperty");
  					Integer number = Integer.parseInt(numberNewPropertyValue);
  					number++;
					pageContext.setAttribute("numberNewProperty", number + "");
			    %>
			    <c:choose>
			  	  <c:when test="${numberNewProperty %2 != 0 && numberApartment == fn:length(listNewProperty)}">
						<div id="line2">
							<div id="col1">
								<a href="productDetail/${apartment.id }">
									<div id="image_product" width="240px" height="150px" ><img src="${pageContext.request.contextPath}/images${apartment.picture }" width="240px" height="150px" />
									</div>
								</a>
								<div id="information_detail">
									<div id="characteristic_special" style="width: 100%;">${apartment.special} <div id="special_mark">*</div></div>
									<div id="characteristic" style="float:right;">Bedroom: ${apartment.bedroom}</div>
									<div id="characteristic">Room: ${apartment.room}</div>
									<div id="characteristic" style="width: 100%;">Sqft: ${apartment.sqft} sqm</div>
									<div id="characteristic" style="width: 100%;">Interior: ${apartment.brtbInterior.interiorName}</div>
									<div id="price">Price: 
										<div id="highlight">${apartment.price} USD/month</div>
									</div>
<%--   									<div id="characteristic_favorite" > --%>
										<div id="characteristic_favorite">
											<img src="<c:url value="/resources/images/favorite.jpg"/>" style="width:20px; height:20px;"/> &nbsp;Add favorites
									</div>
								</div>
								<div id="address">Address: ${apartment.address}</div>
								<a href="productDetail/${apartment.id }">
						        <div id="address_detail">${apartment.productName}</div>
						        </a>
							</div>
					</c:when>
			    	<c:when test="${numberNewProperty %2 != 0}">
						<div id="line2">
							<div id="col1">
								<a href="productDetail/${apartment.id }">
									<div id="image_product" width="240px" height="150px" ><img src="${pageContext.request.contextPath}/images${apartment.picture }" width="240px" height="150px" />
									</div>
								</a>
								<div id="information_detail">
									<div id="characteristic_special" style="width: 100%;">${apartment.special} <div id="special_mark">*</div></div>
									<div id="characteristic" style="float:right;">Bedroom: ${apartment.bedroom}</div>
									<div id="characteristic">Room: ${apartment.room}</div>
									<div id="characteristic" style="width: 100%;">Sqft: ${apartment.sqft} sqm</div>
									<div id="characteristic" style="width: 100%;">Interior: ${apartment.brtbInterior.interiorName}</div>
									<div id="price">Price: 
										<div id="highlight">${apartment.price} USD/month</div>
									</div>
  									<div id="characteristic_favorite" >
										<img src="<c:url value="/resources/images/favorite.jpg"/>" style="width:20px; height:20px;"/> &nbsp;Add favorites
									</div>
								</div>
								<div id="address">Address: ${apartment.address}</div>
								<a href="productDetail/${apartment.id }">
						        <div id="address_detail">${apartment.productName}</div>
						        </a>
							</div>
					</c:when>
					<c:otherwise>
						<div id="col2">
								<a href="productDetail/${apartment.id}">
									<div id="image_product" width="240px" height="150px" ><img src="${pageContext.request.contextPath}/images${apartment.picture }" width="240px" height="150px" />
									</div>
								</a>
								<div id="information_detail">
									<div id="characteristic_special" style="width: 100%;">${apartment.special} <div id="special_mark">*</div></div>
									<div id="characteristic" style="float:right;">Bedroom: ${apartment.bedroom}</div>
									<div id="characteristic">Room: ${apartment.room}</div>
									<div id="characteristic" style="width: 100%;">Sqft: ${apartment.sqft} sqm</div>
									<div id="characteristic" style="width: 100%;">Interior: ${apartment.brtbInterior.interiorName}</div>
									<div id="price">Price: 
										<div id="highlight">${apartment.price} USD/month</div>
									</div>
  									<div id="characteristic_favorite" >
										<img src="<c:url value="/resources/images/favorite.jpg"/>" style="width:20px; height:20px;"/> &nbsp;Add favorites
									</div>
								</div>
								<div id="address">Address: ${apartment.address}</div>
								<a href="productDetail/${apartment.id}">
						        <div id="address_detail">${apartment.productName}</div>
						        </a>
						</div>
						</div>
					</c:otherwise>
				</c:choose>
	    	</c:forEach>
    <div id="more_product"><a href="#">More...</a></div>
  </div>
  </c:if>
  <!-- Apartments area -->
  <c:if test="${not empty listApartments}">
  <div id="product_area" class="apartment_area">
  	<div id="name_property">
		<a href="resultProperty?categoryCode=AP&pageSize=6&page=1">Apartments for rent</a>
	</div>
  			<c:set var="numberApartment" value="0"> </c:set>
  			<c:forEach var="apartment" items="${listApartments }">
  				<% 
  					String numberApartmentValue = (String)pageContext.getAttribute("numberApartment");
  					Integer number = Integer.parseInt(numberApartmentValue);
  					number++;
					pageContext.setAttribute("numberApartment", number + "");
			    %>
			    <c:choose>
				    <c:when test="${numberApartment %2 != 0 && numberApartment == fn:length(listApartments)}">
						<div id="line2">
							<div id="col1">
								<a href="productDetail/${apartment.id }">
									<div id="image_product" width="240px" height="150px" ><img src="${pageContext.request.contextPath}/images${apartment.picture }" width="240px" height="150px" />
									</div>
								</a>
								<div id="information_detail">
									<div id="characteristic_special" style="width: 100%;">${apartment.special} <div id="special_mark">*</div></div>
									<div id="characteristic" style="float:right;">Bedroom: ${apartment.bedroom}</div>
									<div id="characteristic">Room: ${apartment.room}</div>
									<div id="characteristic" style="width: 100%;">Sqft: ${apartment.sqft} sqm</div>
									<div id="characteristic" style="width: 100%;">Interior: ${apartment.brtbInterior.interiorName}</div>
									<div id="price">Price: 
										<div id="highlight">${apartment.price} USD/month</div>
									</div>
  									<div id="characteristic_favorite" >
										<img src="<c:url value="/resources/images/favorite.jpg"/>" style="width:20px; height:20px;"/> &nbsp;Add favorites
									</div>
								</div>
								<div id="address">Address: ${apartment.address}</div>
								<a href="productDetail">
						        <div id="address_detail">${apartment.productName}</div>
						        </a>
							</div>
						</div>
					</c:when>
			    	<c:when test="${numberApartment %2 != 0}">
						<div id="line2">
							<div id="col1">
								<a href="productDetail/${apartment.id }">
									<div id="image_product" width="240px" height="150px" ><img src="${pageContext.request.contextPath}/images${apartment.picture }" width="240px" height="150px" />
									</div>
								</a>
								<div id="information_detail">
									<div id="characteristic_special" style="width: 100%;">${apartment.special} <div id="special_mark">*</div></div>
									<div id="characteristic" style="float:right;">Bedroom: ${apartment.bedroom}</div>
									<div id="characteristic">Room: ${apartment.room}</div>
									<div id="characteristic" style="width: 100%;">Sqft: ${apartment.sqft} sqm</div>
									<div id="characteristic" style="width: 100%;">Interior: ${apartment.brtbInterior.interiorName}</div>
									<div id="price">Price: 
										<div id="highlight">${apartment.price} USD/month</div>
									</div>
  									<div id="characteristic_favorite" >
										<img src="<c:url value="/resources/images/favorite.jpg"/>" style="width:20px; height:20px;"/> &nbsp;Add favorites
									</div>
								</div>
								<div id="address">Address: ${apartment.address}</div>
								<a href="productDetail/${apartment.id }">
						        <div id="address_detail">${apartment.productName}</div>
						        </a>
							</div>
					</c:when>
					<c:otherwise>
						<div id="col2">
								<a href="productDetail/${apartment.id }">
									<div id="image_product" width="240px" height="150px" ><img src="${pageContext.request.contextPath}/images${apartment.picture }" width="240px" height="150px" />
									</div>
								</a>
								<div id="information_detail">
									<div id="characteristic_special" style="width: 100%;">${apartment.special} <div id="special_mark">*</div></div>
									<div id="characteristic" style="float:right;">Bedroom: ${apartment.bedroom}</div>
									<div id="characteristic">Room: ${apartment.room}</div>
									<div id="characteristic" style="width: 100%;">Sqft: ${apartment.sqft} sqm</div>
									<div id="characteristic" style="width: 100%;">Interior: ${apartment.brtbInterior.interiorName}</div>
									<div id="price">Price: 
										<div id="highlight">${apartment.price} USD/month</div>
									</div>
  									<div id="characteristic_favorite" >
										<img src="<c:url value="/resources/images/favorite.jpg"/>" style="width:20px; height:20px;"/> &nbsp;Add favorites
									</div>
								</div>
								<div id="address">Address: ${apartment.address}</div>
								<a href="productDetail/${apartment.id }">
						        <div id="address_detail">${apartment.productName}</div>
						        </a>
						</div>
						</div>
					</c:otherwise>
				</c:choose>
	    	</c:forEach>
    <div id="more_product"><a href="#">More...</a></div>
  </div>
  </c:if>
  <!-- House area -->
  <c:if test="${not empty listHouses}">
  <div id="product_area" class="house_area">
  	<div id="name_property"><a href="resultProperty?categoryCode=HO&pageSize=6&page=1">Houses for rent</a></div>
  			<c:set var="numberApartment" value="0"> </c:set>
  			<c:forEach var="house" items="${listHouses }">
  				<% 
  					String numberApartmentValue = (String)pageContext.getAttribute("numberApartment");
  					Integer number = Integer.parseInt(numberApartmentValue);
  					number++;
					pageContext.setAttribute("numberApartment", number + "");
			    %>
			    <c:choose>
			    	<c:when test="${numberApartment %2 != 0 && numberApartment == fn:length(listHouses)}">
						<div id="line2">
							<div id="col1">
								<a href="productDetail/${house.id }">
									<div id="image_product" width="240px" height="150px" ><img src="${pageContext.request.contextPath}/images${house.picture }" width="240px" height="150px" />
									</div>
								</a>
								<div id="information_detail">
									<div id="characteristic_special" style="width: 100%;">${house.special} <div id="special_mark">*</div></div>
									<div id="characteristic" style="float:right;">Bedroom: ${house.bedroom}</div>
									<div id="characteristic">Room: ${house.room}</div>
									<div id="characteristic" style="width: 100%;">Sqft: ${house.sqft} sqm</div>
									<div id="characteristic" style="width: 100%;">Interior: ${house.brtbInterior.interiorName}</div>
									<div id="price">Price: 
										<div id="highlight">${house.price} USD/month</div>
									</div>
  									<div id="characteristic_favorite" onclick="addToFavorite(${house.id }, '${pageContext.request.contextPath}/images${house.picture }')">
										<img src="<c:url value="/resources/images/favorite.jpg"/>" style="width:20px; height:20px;"/> &nbsp;Add favorites
									</div>
								</div>
								<div id="address">Address: ${house.address}</div>
								<a href="productDetail/${house.id }">
						        <div id="address_detail">${house.productName}</div>
						        </a>
							</div>
						</div>
					</c:when>
			    	<c:when test="${numberApartment %2 != 0}">
						<div id="line2">
							<div id="col1">
								<a href="productDetail/${house.id }">
									<div id="image_product" width="240px" height="150px" ><img src="${pageContext.request.contextPath}/images${house.picture }" width="240px" height="150px" />
									</div>
								</a>
								<div id="information_detail">
									<div id="characteristic_special" style="width: 100%;">${house.special} <div id="special_mark">*</div></div>
									<div id="characteristic" style="float:right;">Bedroom: ${house.bedroom}</div>
									<div id="characteristic">Room: ${house.room}</div>
									<div id="characteristic" style="width: 100%;">Sqft: ${house.sqft} sqm</div>
									<div id="characteristic" style="width: 100%;">Interior: ${house.brtbInterior.interiorName}</div>
									<div id="price">Price: 
										<div id="highlight">${house.price} USD/month</div>
									</div>
  									<div id="characteristic_favorite" onclick="addToFavorite(${house.id }, '${pageContext.request.contextPath}/images${house.picture }')">
										<img src="<c:url value="/resources/images/favorite.jpg"/>" style="width:20px; height:20px;"/> &nbsp;Add favorites
									</div>
								</div>
								<div id="address">Address: ${house.address}</div>
								<a href="productDetail/${house.id }">
						        <div id="address_detail">${house.productName}</div>
						        </a>
							</div>
					</c:when>
					<c:otherwise>
						<div id="col2">
								<a href="productDetail/${house.id }">
									<div id="image_product" width="240px" height="150px" ><img src="${pageContext.request.contextPath}/images${house.picture }" width="240px" height="150px" />
									</div>
								</a>
								<div id="information_detail">
									<div id="characteristic_special" style="width: 100%;">${house.special} <div id="special_mark">*</div></div>
									<div id="characteristic" style="float:right;">Bedroom: ${house.bedroom}</div>
									<div id="characteristic">Room: ${house.room}</div>
									<div id="characteristic" style="width: 100%;">Sqft: ${house.sqft} sqm</div>
									<div id="characteristic" style="width: 100%;">Interior: ${house.brtbInterior.interiorName}</div>
									<div id="price">Price: 
										<div id="highlight">${house.price} USD/month</div>
									</div>
  									<div id="characteristic_favorite" onclick="addToFavorite(${house.id }, '${pageContext.request.contextPath}/images${house.picture }')">
										<img src="<c:url value="/resources/images/favorite.jpg"/>" style="width:20px; height:20px;"/> &nbsp;Add favorites
									</div>
								</div>
								<div id="address">Address: ${house.address}</div>
								<a href="productDetail.html">
						        <div id="address_detail">${house.productName}</div>
						        </a>
						</div>
						</div>
					</c:otherwise>
				</c:choose>
	    	</c:forEach>
    <div id="more_product"><a href="#">More...</a></div>
  </div>
  </c:if>
  <!-- Villa area -->
  <c:if test="${not empty listVillas}">
  <div id="product_area" class="villa_area">
  	<div id="name_property"><a href="resultProperty?categoryCode=VI&pageSize=6&page=1">VILLAS FOR RENT</a></div>
  			<c:set var="numberApartment" value="0"> </c:set>
  			<c:forEach var="villa" items="${listVillas }">
  				<% 
  					String numberApartmentValue = (String)pageContext.getAttribute("numberApartment");
  					Integer number = Integer.parseInt(numberApartmentValue);
  					number++;
					pageContext.setAttribute("numberApartment", number + "");
			    %>
			    <c:choose>
			    	<c:when test="${numberApartment %2 != 0 && numberApartment == fn:length(listVillas)}">
						<div id="line2">
							<div id="col1">
								<a href="productDetail/${villa.id }">
									<div id="image_product" width="240px" height="150px" ><img src="${pageContext.request.contextPath}/images${villa.picture }" width="240px" height="150px" />
									</div>
								</a>
								<div id="information_detail">
									<div id="characteristic_special" style="width: 100%;">${villa.special} <div id="special_mark">*</div></div>
									<div id="characteristic" style="float:right;">Bedroom: ${villa.bedroom}</div>
									<div id="characteristic">Room: ${villa.room}</div>
									<div id="characteristic" style="width: 100%;">Sqft: ${villa.sqft} sqm</div>
									<div id="characteristic" style="width: 100%;">Interior: ${villa.brtbInterior.interiorName}</div>
									<div id="price">Price: 
										<div id="highlight">${villa.price} USD/month</div>
									</div>
  									<div id="characteristic_favorite" onclick="addToFavorite(${villa.id }, '${pageContext.request.contextPath}/images${villa.picture }')">
										<img src="<c:url value="/resources/images/favorite.jpg"/>" style="width:20px; height:20px;"/> &nbsp;Add favorites
									</div>
								</div>
								<div id="address">Address: ${villa.address}</div>
								<a href="productDetail/${villa.id }">
						        <div id="address_detail">${villa.productName}</div>
						        </a>
							</div>
						</div>
					</c:when>
			    	<c:when test="${numberApartment %2 != 0}">
						<div id="line2">
							<div id="col1">
								<a href="productDetail/${villa.id }">
									<div id="image_product" width="240px" height="150px" ><img src="${pageContext.request.contextPath}/images${villa.picture }" width="240px" height="150px" />
									</div>
								</a>
								<div id="information_detail">
									<div id="characteristic_special" style="width: 100%;">${villa.special} <div id="special_mark">*</div></div>
									<div id="characteristic" style="float:right;">Bedroom: ${villa.bedroom}</div>
									<div id="characteristic">Room: ${villa.room}</div>
									<div id="characteristic" style="width: 100%;">Sqft: ${villa.sqft} sqm</div>
									<div id="characteristic" style="width: 100%;">Interior: ${villa.brtbInterior.interiorName}</div>
									<div id="price">Price: 
										<div id="highlight">${villa.price} USD/month</div>
									</div>
  									<div id="characteristic_favorite" onclick="addToFavorite(${villa.id }, '${pageContext.request.contextPath}/images${villa.picture }')">
										<img src="<c:url value="/resources/images/favorite.jpg"/>" style="width:20px; height:20px;"/> &nbsp;Add favorites
									</div>
								</div>
								<div id="address">Address: ${villa.address}</div>
								<a href="productDetail/${villa.id }">
						        <div id="address_detail">${villa.productName}</div>
						        </a>
							</div>
					</c:when>
					<c:otherwise>
						<div id="col2">
								<a href="productDetail/${villa.id }">
									<div id="image_product" width="240px" height="150px" ><img src="${pageContext.request.contextPath}/images${villa.picture }" width="240px" height="150px" />
									</div>
								</a>
								<div id="information_detail">
									<div id="characteristic_special" style="width: 100%;">${villa.special} <div id="special_mark">*</div></div>
									<div id="characteristic" style="float:right;">Bedroom: ${villa.bedroom}</div>
									<div id="characteristic">Room: ${villa.room}</div>
									<div id="characteristic" style="width: 100%;">Sqft: ${villa.sqft} sqm</div>
									<div id="characteristic" style="width: 100%;">Interior: ${villa.brtbInterior.interiorName}</div>
									<div id="price">Price: 
										<div id="highlight">${villa.price} USD/month</div>
									</div>
  									<div id="characteristic_favorite" onclick="addToFavorite(${villa.id }, '${pageContext.request.contextPath}/images${villa.picture }')">
										<img src="<c:url value="/resources/images/favorite.jpg"/>" style="width:20px; height:20px;"/> &nbsp;Add favorites
									</div>
								</div>
								<div id="address">Address: ${villa.address}</div>
								<a href="productDetail/${villa.id }">
						        <div id="address_detail">${villa.productName}</div>
						        </a>
						</div>
						</div>
					</c:otherwise>
				</c:choose>
	    	</c:forEach>
    <div id="more_product"><a href="#">More...</a></div>
  </div>
  </c:if>
  <!-- Serviced apartment area -->
  <c:if test="${not empty listSApartments}">
  <div id="product_area" class="service_apartment_area">
  	<div id="name_property"><a href="resultProperty?categoryCode=SE&pageSize=6&page=1">SERVICED APARTMENT FOR RENT</a></div>
  			<c:set var="numberApartment" value="0"> </c:set>
  			<c:forEach var="servicedApartment" items="${listSApartments }">
  				<% 
  					String numberApartmentValue = (String)pageContext.getAttribute("numberApartment");
  					Integer number = Integer.parseInt(numberApartmentValue);
  					number++;
					pageContext.setAttribute("numberApartment", number + "");
			    %>
			    <c:choose>
			    	<c:when test="${numberApartment %2 != 0 && numberApartment == fn:length(listSApartments)}">
						<div id="line2">
							<div id="col1">
								<a href="productDetail/${servicedApartment.id }">
									<div id="image_product" width="240px" height="150px" ><img src="${pageContext.request.contextPath}/images${servicedApartment.picture }" width="240px" height="150px" />
									</div>
								</a>
								<div id="information_detail">
									<div id="characteristic_special" style="width: 100%;">${servicedApartment.special} <div id="special_mark">*</div></div>
									<div id="characteristic" style="float:right;">Bedroom: ${servicedApartment.bedroom}</div>
									<div id="characteristic">Room: ${servicedApartment.room}</div>
									<div id="characteristic" style="width: 100%;">Sqft: ${servicedApartment.sqft} sqm</div>
									<div id="characteristic" style="width: 100%;">Interior: ${servicedApartment.brtbInterior.interiorName}</div>
									<div id="price">Price: 
										<div id="highlight">${servicedApartment.price} USD/month</div>
									</div>
  									<div id="characteristic_favorite" onclick="addToFavorite(${servicedApartment.id }, '${pageContext.request.contextPath}/images${servicedApartment.picture }')">
										<img src="<c:url value="/resources/images/favorite.jpg"/>" style="width:20px; height:20px;"/> &nbsp;Add favorites
									</div>
								</div>
								<div id="address">Address: ${servicedApartment.address}</div>
								<a href="productDetail/${servicedApartment.id }">
						        <div id="address_detail">${servicedApartment.productName}</div>
						        </a>
							</div>
						</div>
					</c:when>
			    	<c:when test="${numberApartment %2 != 0}">
						<div id="line2">
							<div id="col1">
								<a href="productDetail/${servicedApartment.id }">
									<div id="image_product" width="240px" height="150px" ><img src="${pageContext.request.contextPath}/images${servicedApartment.picture }" width="240px" height="150px" />
									</div>
								</a>
								<div id="information_detail">
									<div id="characteristic_special" style="width: 100%;">${servicedApartment.special} <div id="special_mark">*</div></div>
									<div id="characteristic" style="float:right;">Bedroom: ${servicedApartment.bedroom}</div>
									<div id="characteristic">Room: ${servicedApartment.room}</div>
									<div id="characteristic" style="width: 100%;">Sqft: ${servicedApartment.sqft} sqm</div>
									<div id="characteristic" style="width: 100%;">Interior: ${servicedApartment.brtbInterior.interiorName}</div>
									<div id="price">Price: 
										<div id="highlight">${servicedApartment.price} USD/month</div>
									</div>
  									<div id="characteristic_favorite" onclick="addToFavorite(${servicedApartment.id }, '${pageContext.request.contextPath}/images${servicedApartment.picture }')">
										<img src="<c:url value="/resources/images/favorite.jpg"/>" style="width:20px; height:20px;"/> &nbsp;Add favorites
									</div>
								</div>
								<div id="address">Address: ${servicedApartment.address}</div>
								<a href="productDetail/${servicedApartment.id }">
						        <div id="address_detail">${servicedApartment.productName}</div>
						        </a>
							</div>
					</c:when>
					<c:otherwise>
						<div id="col2">
								<a href="productDetail/${servicedApartment.id }">
									<div id="image_product" width="240px" height="150px" ><img src="${pageContext.request.contextPath}/images${servicedApartment.picture }" width="240px" height="150px" />
									</div>
								</a>
								<div id="information_detail">
									<div id="characteristic_special" style="width: 100%;">${servicedApartment.special} <div id="special_mark">*</div></div>
									<div id="characteristic" style="float:right;">Bedroom: ${servicedApartment.bedroom}</div>
									<div id="characteristic">Room: ${servicedApartment.room}</div>
									<div id="characteristic" style="width: 100%;">Sqft: ${servicedApartment.sqft} sqm</div>
									<div id="characteristic" style="width: 100%;">Interior: ${servicedApartment.brtbInterior.interiorName}</div>
									<div id="price">Price: 
										<div id="highlight">${servicedApartment.price} USD/month</div>
									</div>
  									<div id="characteristic_favorite" onclick="addToFavorite(${servicedApartment.id }, '${pageContext.request.contextPath}/images${servicedApartment.picture }')">
										<img src="<c:url value="/resources/images/favorite.jpg"/>" style="width:20px; height:20px;"/> &nbsp;Add favorites
									</div>
								</div>
								<div id="address">Address: ${servicedApartment.address}</div>
								<a href="productDetail/${servicedApartment.id }">
						        <div id="address_detail">${servicedApartment.productName}</div>
						        </a>
						</div>
						</div>
					</c:otherwise>
				</c:choose>
	    	</c:forEach>
    
    <div id="more_product"><a href="#">More...</a></div>
  </div>
  </c:if>
  <c:if test="${not empty listResorts}">
  <div id="product_area" class="show_room_area">
  	<div id="name_property"><a href="resultProperty?categoryCode=RE&pageSize=6">RESORT FOR RENT</a></div>
  			<c:set var="numberApartment" value="0"> </c:set>
  			<c:forEach var="resort" items="${listResorts }">
  				<% 
  					String numberApartmentValue = (String)pageContext.getAttribute("numberApartment");
  					Integer number = Integer.parseInt(numberApartmentValue);
  					number++;
					pageContext.setAttribute("numberApartment", number + "");
			    %>
			    <c:choose>
			    	<c:when test="${numberApartment %2 != 0 && numberApartment == fn:length(listResorts)}">
						<div id="line2">
							<div id="col1">
								<a href="productDetail/${resort.id }">
									<div id="image_product" width="240px" height="150px" ><img src="${pageContext.request.contextPath}/images${resort.picture }" width="240px" height="150px" />
									</div>
								</a>
								<div id="information_detail">
									<div id="characteristic_special" style="width: 100%;">${resort.special} <div id="special_mark">*</div></div>
									<div id="characteristic" style="float:right;">Bedroom: ${resort.bedroom}</div>
									<div id="characteristic">Room: ${resort.room}</div>
									<div id="characteristic" style="width: 100%;">Sqft: ${resort.sqft} sqm</div>
									<div id="characteristic" style="width: 100%;">Interior: ${resort.brtbInterior.interiorName}</div>
									<div id="price">Price: 
										<div id="highlight">${resort.price} USD/month</div>
									</div>
  									<div id="characteristic_favorite" onclick="addToFavorite(${resort.id }, '${pageContext.request.contextPath}/images${resort.picture }')">
										<img src="<c:url value="/resources/images/favorite.jpg"/>" style="width:20px; height:20px;"/> &nbsp;Add favorites
									</div>
								</div>
								<div id="address">Address: ${resort.address}</div>
								<a href="productDetail/${resort.id }">
						        <div id="address_detail">${resort.productName}</div>
						        </a>
							</div>
						</div>
					</c:when>
			    	<c:when test="${numberApartment %2 != 0}">
						<div id="line2">
							<div id="col1">
								<a href="productDetail/${resort.id }">
									<div id="image_product" width="240px" height="150px" ><img src="${pageContext.request.contextPath}/images${resort.picture }" width="240px" height="150px" />
									</div>
								</a>
								<div id="information_detail">
									<div id="characteristic_special" style="width: 100%;">${resort.special} <div id="special_mark">*</div></div>
									<div id="characteristic" style="float:right;">Bedroom: ${resort.bedroom}</div>
									<div id="characteristic">Room: ${resort.room}</div>
									<div id="characteristic" style="width: 100%;">Sqft: ${resort.sqft} sqm</div>
									<div id="characteristic" style="width: 100%;">Interior: ${resort.brtbInterior.interiorName}</div>
									<div id="price">Price: 
										<div id="highlight">${resort.price} USD/month</div>
									</div>
  									<div id="characteristic_favorite" onclick="addToFavorite(${resort.id }, '${pageContext.request.contextPath}/images${resort.picture }')">
										<img src="<c:url value="/resources/images/favorite.jpg"/>" style="width:20px; height:20px;"/> &nbsp;Add favorites
									</div>
								</div>
								<div id="address">Address: ${resort.address}</div>
								<a href="productDetail/${resort.id }">
						        	<div id="address_detail">${resort.productName}</div>
						        </a>
							</div>
					</c:when>
					<c:otherwise>
						<div id="col2">
								<a href="productDetail/${resort.id }">
									<div id="image_product" width="240px" height="150px" ><img src="${pageContext.request.contextPath}/images${resort.picture }" width="240px" height="150px" />
									</div>
								</a>
								<div id="information_detail">
									<div id="characteristic_special" style="width: 100%;">${resort.special} <div id="special_mark">*</div></div>
									<div id="characteristic" style="float:right;">Bedroom: ${resort.bedroom}</div>
									<div id="characteristic">Room: ${resort.room}</div>
									<div id="characteristic" style="width: 100%;">Sqft: ${resort.sqft} sqm</div>
									<div id="characteristic" style="width: 100%;">Interior: ${resort.brtbInterior.interiorName}</div>
									<div id="price">Price: 
										<div id="highlight">${resort.price} USD/month</div>
									</div>
  									<div id="characteristic_favorite" onclick="addToFavorite(${resort.id }, '${pageContext.request.contextPath}/images${resort.picture }')">
										<img src="<c:url value="/resources/images/favorite.jpg"/>" style="width:20px; height:20px;"/> &nbsp;Add favorites
									</div>
								</div>
								<div id="address">Address: ${resort.address}</div>
								<a href="productDetail/${resort.id }">
						        <div id="address_detail">${resort.productName}</div>
						        </a>
						</div>
						</div>
					</c:otherwise>
				</c:choose>
	    	</c:forEach>
    <div id="more_product"><a href="#">More..</a>.</div>
  </div>
  </c:if>
	</div> 
	<!--end main_container-->
	<div id="product_area_footer" class="villa_area">
		<div id="name_property_footer">
			<div id="option_menu">
				<ul id="nav">
				  <li><a href="#">passport</a></li>
				  <li><a href="#">hotel</a></li>
				  <li><a href="#">rent car</a></li>
				  <li><a href="#">school</a></li>
				</ul>
			</div>
		</div>		
	</div>
	<div id="fullsupport">
		<strong>For more information contact with Mr Phuc: 0904 674 199</strong>
	</div>
</body>
</html>
